import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    category: [], //所有的商品的数据
    select: 0,//左侧选中
    cart: JSON.parse(window.localStorage.getItem("cart")) || [], //保存的数据
    allChecked: false, //购物车底部的复选框
    total: 0, //总价
    isShow: false,
  },
  mutations: {
    // 商品的数据
    GET_CATEGORY_DATA(state, item) {
      state.category = item
    },
    //选中index
    GET_CATEGORY_INDEX(state, index) {
      state.select = index
    },
    //添加购物车
    GET_CART_DATA(state, item) {
      state.isShow = false;
      let flag = false;
      //判断添加商品是否重复
      state.cart.map((ele) => {
        // 重复数量加一
        if (ele.item.id == item.id) {
          flag = true;
          ele.count++;
        }
      })
      //否则单个添加
      if (!flag) {
        state.cart.push({
          item,
          count: 1,
          checked: false
        })
      }
      state.total = 0;
      state.cart.map(ele => {
        if (ele.checked) {
          state.total += ele.count * ele.item.comm_price
        }
      })
      localStorage.setItem('cart', JSON.stringify(state.cart))
    },
    // 购物车内商品数量减
    SUB_DATA(state, item) {
      if (item.count > 1) {
        item.count--;
        state.total = 0;
        state.cart.map(ele => {
          if (ele.checked) {
            state.total += ele.count * ele.item.comm_price
          }
        })
        localStorage.setItem('cart', JSON.stringify(state.cart))
      }
    },
    // 购物车内商品数量加
    ADD_DATA(state, item) {
      item.count++;
      state.total = 0;
      state.cart.map(ele => {
        if (ele.checked) {
          state.total += ele.count * ele.item.comm_price
        }
      })
      localStorage.setItem('cart', JSON.stringify(state.cart))
    },
    // 购物车内删除商品
    DELETE_DATA(state, index) {
      state.cart.splice(index, 1);
      if (state.cart.length == 0) {
        state.isShow = true;
      } else {
        state.isShow = false;
      }
      state.total = 0;
      state.cart.map(ele => {
        if (ele.checked) {
          state.total += ele.count * ele.item.comm_price
        }
      })
      localStorage.setItem('cart', JSON.stringify(state.cart))
    },
    // 点击单个商品上面的复选框
    CHANGECHECKED(state, item) {
      item.checked = !item.checked;
      var status = state.cart.every(el => {
        return el.checked == true
      })
      state.allChecked = status;
      state.total = 0;
      state.cart.map(ele => {
        if (ele.checked) {
          state.total += ele.count * ele.item.comm_price
        }
      })
      localStorage.setItem('cart', JSON.stringify(state.cart))
    },
    // 全选的复选框
    ChECKALL(state) {
      state.allChecked = !state.allChecked;
      state.cart.forEach(ele => {
        ele.checked = state.allChecked
      });
      state.total = 0;
      state.cart.map(ele => {
        if (ele.checked) {
          state.total += ele.count * ele.item.comm_price
        }
      })
      localStorage.setItem('cart', JSON.stringify(state.cart))
    }
  },
  actions: {
    // 商品的数据
    GET_CATEGORY_DATA(context) {
      axios.get("/api/shopping.json").then(res => {
        // console.log(res.data);
        context.commit('GET_CATEGORY_DATA', res.data);
      }).catch(err => {
        console.log(err)
      })
    },
    //选中的左侧导航
    GET_CATEGORY_INDEX(context, index) {
      context.commit('GET_CATEGORY_INDEX', index)
    },
    // 添加购物车
    GET_CART_DATA(context, item) {
      context.commit('GET_CART_DATA', item)
    },
    // 减数量
    SUB_DATA(context, item) {
      context.commit('SUB_DATA', item)
    },
    // 加数量
    ADD_DATA(context, item) {
      context.commit('ADD_DATA', item)
    },
    // 删除商品
    DELETE_DATA(context, index) {
      context.commit('DELETE_DATA', index)
    },
    // 点击商品上面的复选框
    CHANGECHECKED(context, item) {
      context.commit('CHANGECHECKED', item)
    },
    // 全选的复选框
    ChECKALL(context) {
      context.commit("ChECKALL")
    }
  },
  modules: {}
})